<script lang="tsx" setup>
import { getF9Config } from '@/apis/root';
import { jumpElement } from '@vc/utils';
import { cloneDeep } from 'lodash-es';
import { TABS_ENUM } from './constants';
import { createF9Context } from './use/use-context';
import { useTitle } from './use/useTitle';
import { useElementBounding } from '@vueuse/core';
import LoadErrorDeal from '@/components/load-error-deal/index.vue';
import Menu from './components/menu.vue';
import HeaderInfo from './components/header-info.vue';
import './menu.scss';
import EmptyModule from '@/components/empty-module/index.vue';

import EnterpriseDynamics from './modules/enterprise-dynamics/index.vue';
import Esg from './modules/esg/index.vue';
import EnvironmentalSupervision from './modules/environmental-supervision/index.vue';
import EnvironmentalCredit from './modules/environmental-credit/index.vue';
import PollutionDischargePermits from './modules/pollution-discharge-permits/index.vue';
import GreenFinance from './modules/green-finance/index.vue';
import EnvironmentalPerformance from './modules/environmental-performance/index.vue';
import SocietyGovern from './modules/society-govern/index.vue';
import PollutionMonitoring from './modules/pollution-monitoring/index.vue';

const route = useRoute();
const router = useRouter();
/** 存储各个菜单当前选中 tab 信息 */
const activeTabs = reactive({
  enterpriseDynamics: '全部'
});

defineOptions({
  name: 'EnterpriseOverview'
});

const companyId = cloneDeep(decodeURIComponent(route.params.id as string));

createF9Context({
  companyId
});

const { loading, data, error } = useRequest(getF9Config, {
  defaultParams: [companyId]
});

const getTabInfo = (name) => {
  return data.value.groupList?.filter((item) => {
    return item.name === name;
  })?.[0];
};

useTitle(loading, data, router.currentRoute.value);

const contentRef = ref(null);
const { top } = useElementBounding(contentRef);

//  选中事件
const handleMenuClick = (info) => {
  const { data, name, pid } = info;
  
  const { id, name: subName } = data;
  
  // 企业动态处理特殊
  if (name === TABS_ENUM.ENTERPRISE_DYNAMICS) {
    activeTabs.enterpriseDynamics = subName;
    useTimeoutFn(() => jumpElement(name + '_' + pid), 300);
  } else {
    jumpElement(subName + '_' + id);
  }
};

// f9 模块信息
const modules = computed(() => {
  const tab_enterpriseDynamics = getTabInfo(TABS_ENUM.ENTERPRISE_DYNAMICS);
  const tab_environmental_credit = getTabInfo(TABS_ENUM.ENVIRONMENTAL_CREDIT);
  const tab_environmental_supervision = getTabInfo(TABS_ENUM.ENVIRONMENTAL_SUPERVISION);
  const tab_pollution_discharge_permits = getTabInfo(TABS_ENUM.POLLUTION_DISCHARGE_PERMITS);
  const tab_esg = getTabInfo(TABS_ENUM.ESG);
  const tab_green_finance = getTabInfo(TABS_ENUM.GREEN_FINANCE);
  const tab_society = getTabInfo(TABS_ENUM.SOCIETY);
  const tab_govern = getTabInfo(TABS_ENUM.GOVERN);
  const tab_environmental_performance = getTabInfo(TABS_ENUM.ENVIRONMENTAL_PERFORMANCE);
  const tab_pollution_monitoring = getTabInfo(TABS_ENUM.POLLUTION_MONITORING);
  
  return [
    {
      emptyJudge: tab_enterpriseDynamics?.functions?.length,
      moduleComp: <EnterpriseDynamics activeTab={activeTabs.enterpriseDynamics}
        tabs={tab_enterpriseDynamics} />
    },
    { emptyJudge: tab_esg?.functions?.length, moduleComp: <Esg tabs={tab_esg} /> },
    {
      emptyJudge: tab_environmental_performance?.functions?.length,
      moduleComp: <EnvironmentalPerformance tabs={tab_environmental_performance} />
    },
    {
      emptyJudge: tab_environmental_credit?.functions?.length,
      moduleComp: <EnvironmentalCredit tabs={tab_environmental_credit} />
    },
    {
      emptyJudge: tab_environmental_supervision?.functions?.length,
      moduleComp: <EnvironmentalSupervision tabs={tab_environmental_supervision} />
    },
    {
      emptyJudge: tab_pollution_discharge_permits?.functions?.length,
      moduleComp: <PollutionDischargePermits tabs={tab_pollution_discharge_permits} />
    },
    {
      emptyJudge: tab_pollution_monitoring?.functions?.length,
      moduleComp: <PollutionMonitoring tabs={tab_pollution_monitoring} />
    },
    {
      emptyJudge: tab_society?.functions?.length,
      moduleComp: <SocietyGovern tabs={tab_society} />
    },
    { emptyJudge: tab_govern?.functions?.length, moduleComp: <SocietyGovern tabs={tab_govern} /> },
    {
      emptyJudge: tab_green_finance?.functions?.length,
      moduleComp: <GreenFinance tabs={tab_green_finance} />
    }
  ];
});

defineRender(() => {
  return (
    <div class="f9-container">
      {loading.value || error.value || !data.value?.name ? (
        <LoadErrorDeal loading={loading.value} error={error.value}
          isNoData={!data.value?.name || !data.value?.groupList?.length} />
      ) : (
        <>
          <div class="header">
            <div class="header-con">
              <HeaderInfo companyInfo={data.value} />
            </div>
          </div>
          {data.value?.groupList?.length ?
            <Menu onClick={handleMenuClick} list={data.value?.groupList} /> : null}
          {/* <div class="w-full h-7px sticky top-45px z-999 bg-[#eaeaea]" /> */}
          <div class="content" ref={contentRef}
            style={{ minHeight: `calc(100vh - ${(top.value || 0) + 58}px)` }}>
            {
              data.value?.groupList?.length ? modules.value.map((item) => {
                return <EmptyModule emptyJudge={item.emptyJudge}
                  moduleComp={item.moduleComp}></EmptyModule>;
              }) : <vc-nodata type={100}>很抱歉该企业没有更多信息</vc-nodata>
            }
          </div>
        </>
      )}
    </div>
  );
});
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
